<template>
  <div class="music">
    <div class="top-search" @click="goSerch">
      <i class="iconfont icon-sousuo"></i>
      动物世界-薛之谦
    </div>

    <!-- 标题 -->
    <div class="title">
      <div class="title-left vue2Font1">推荐歌曲</div>
      <div class="title-right vue2Font5">更多 <span>></span></div>
    </div>

    <!-- 获取推荐音乐 -->
    <template v-for="item in recommendMusicL">
      <RecommenMusic :itemdata="item" :key="item.id"></RecommenMusic>
    </template>

    <!-- 热门歌曲 -->
    <div class="title">
      <div class="title-left vue2Font1">热门歌曲</div>
      <div class="title-right vue2Font5">更多 <span>></span></div>
    </div>

    <!-- //获取hotmusic -->
    <div class="HotMusic">
      <HotMusic
        v-for="item in hotListData"
        :key="item.id"
        :hotItem="item"
      ></HotMusic>
    </div>
    <!-- 官方歌单 -->
    <div class="title">
      <div class="title-left vue2Font1">官方歌单</div>
      <div class="title-right vue2Font5">更多 <span>></span></div>
    </div>
    <!-- //推荐官方歌单 -->
    <div class="HotMusic">
      <HotMusic
        v-for="item in hotListData"
        :key="item.id"
        :hotItem="item"
      ></HotMusic>
    </div>
    <!-- 巅峰榜 -->
    <div class="title">
      <div class="title-left vue2Font1">巅峰榜</div>
      <div class="title-right vue2Font5"></div>
    </div>
    <!-- 巅峰榜 -->
    <ListItem></ListItem>
  </div>
</template>

<script>
import RecommenMusic from "./RecommenMusic.vue";
import HotMusic from "./HotMusic.vue";
import ListItem from "./ListItem.vue";
//@ =>sr目录下
import {
  RecommendMusics,
  hotMusicData,
  officialData,
} from "@/http/api/music.js";
export default {
  components: {
    RecommenMusic,
    HotMusic,
    ListItem,
  },
  data() {
    return {
      recommendMusicL: [],
      hotListData: [], //保存hot
      officialDatasList: [],
    };
  },
  // 写一个生命周期
  created() {
    // 获取接口数据
    this.getReListM();
    //热门歌单 this 当前的vue实例
    this.getHotdata();
    this.officialDatas();
  },
  methods: {
    //获取推荐歌曲数据
    getReListM() {
      // 1有获取这个数据  2没有=>发送请求
      if (sessionStorage.getItem("recommendMusicL")) {
        //有数据
        this.recommendMusicL = JSON.parse(
          sessionStorage.getItem("recommendMusicL")
        );
      } else {
        //没有数据
        RecommendMusics("/personalized/newsong", { limit: 6 }).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.recommendMusicL = res.result; //获取推荐的数据[{},{}
            // 存放数据
            sessionStorage.setItem(
              "recommendMusicL",
              JSON.stringify(res.result)
            ); //注意=>字符串
          }
        });
      }
    },
    //获取hotMusic
    getHotdata() {
      if (sessionStorage.getItem("hotListData")) {
        this.hotListData = JSON.parse(sessionStorage.getItem("hotListData"));
      } else {
        //没有从后台获取数据在把这个数据存放到本地
        hotMusicData("/top/playlist/highquality", { limit: 6 }).then((res) => {
          // console.log(res)
          if (res.code == 200) {
            this.hotListData = res.playlists; //热门歌曲的数据 [{},{}]
            // {推荐:recommendMusicL,hot:hotListData}
            sessionStorage.setItem(
              "hotListData",
              JSON.stringify(res.playlists)
            );
          }
        });
      }
    },
    //获取官方歌曲
    officialDatas() {
      officialData("/top/playlist", { limit: 6 }).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.officialList = res.playlists;
        }
      });
    },
    goSerch() {
      // 路由跳转
      this.$router.push("/serch");
    },
  },
};

// 获取巅峰榜
</script>

<style scoped lang="less">
.music {
  padding: 20px 30px;
  color: #ddd;
  margin-bottom: 450px;
  //   头部搜索
  .top-search {
    height: 130px;
    background: rgb(255, 255, 255);
    border-radius: 0.5rem;
    text-align: center;
    line-height: 130px;
    color: #aaa;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    .icon-sousuo {
      font-size: 0.9rem;
    }
  }
  //   标题
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    color: black;
    .title-left {
      font-size: 1.125rem;
      font-weight: normal;
      color: #333;
    }
    .title-right {
      font-size: 0.9rem;
      color: #bbb;
    }
  }
  .HotMusic {
    display: flex;
    overflow-x: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>